<template>
<!--  添加-->
  <el-button plain @click="dialogVisible = true">添加</el-button>
  <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="500"
      :before-close="handleClose"
  >
    <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
    >
      <el-form-item label="车牌号" prop="pass">
        <el-select v-model="ruleForm.licensePlateId" placeholder="请选择车牌省市" style="width: 240px">
          <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.capital"
              :value="item.id"
              :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="请输入车牌号码" prop="pass">
        <el-input v-model="ruleForm.carNo"/>
      </el-form-item>
      <el-form-item label="品牌" prop="pass">
        <el-select v-model="ruleForm.carBrandId" placeholder="请选择品牌" style="width: 240px">
          <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.brand"
              :value="item.id"
              :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="燃料" prop="pass">
        <el-select v-model="ruleForm.fuelTypeId" placeholder="请选择燃料" style="width: 240px">
          <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.fuelType"
              :value="item.id"
              :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="排量" prop="pass">
        <el-select v-model="ruleForm.displacementId" placeholder="请选择排量" style="width: 240px">
          <el-option
              v-for="item in options3"
              :key="item.id"
              :label="item.displacement"
              :value="item.id"
              :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="电池类型" prop="pass">
        <el-select v-model="ruleForm.batteryCapacityId" placeholder="请选择电池类型" style="width: 240px">
          <el-option
              v-for="item in options4"
              :key="item.id"
              :label="item.battery"
              :value="item.id"
              :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="额定电压" prop="pass">
        <el-input v-model="ruleForm.voltage"/>
      </el-form-item>
      <el-form-item label="电池容量" prop="pass">
        <el-input v-model="ruleForm.capacity"/>
      </el-form-item>
      <el-form-item label="续航里程" prop="pass">
        <el-input v-model="ruleForm.range"/>
      </el-form-item>
      <el-form-item label="车架号" prop="pass">
        <el-input v-model="ruleForm.vehicleIdentifyNo"/>
      </el-form-item>
      <el-form-item label="最高时速" prop="pass">
        <el-input v-model="ruleForm.maxSpeed"/>
      </el-form-item>
      <el-form-item label="能耗说明" prop="pass">
        <el-input v-model="ruleForm.energyConsumptionDesc"/>
      </el-form-item>
      <el-form-item label="其他说明" prop="pass">
        <el-input v-model="ruleForm.otherDesc"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()">
          添加
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 查询所有 -->
  <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column property="id" label="主键" />
    <el-table-column property="carNo" label="车牌省市" />
    <el-table-column property="bill" label="当前账单" />
    <el-table-column property="range" label="续航里程" />
    <el-table-column property="brand" label="车辆品牌" />
    <el-table-column property="vehicleIdentifyNo" label="车架号" />
    <el-table-column property="maxSpeed" label="最高时速" />
    <el-table-column property="modelParameters" label="车辆参数" />
    <el-table-column property="energyConsumptionDesc" label="能耗说明" />
    <el-table-column property="otherDesc" label="其他说明" />
    <el-table-column property="fuelType" label="燃料" />
    <el-table-column prop="avatarImg" label="头像">
       <template #default="scope">
       <img :src="scope.row.avatarImg" alt="头像" style="width: 50px;height: 50px;">
       </template>
       </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row.id)"
        >
          移出
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>

import { ref } from 'vue'
import {requestCarManager} from "@/utils/request.js";

// 查询所有
const tableData =ref([])
function selectAll(){
  requestCarManager({
    url:'/admin/car/selectAll',
    method:'get'
  }).then(res=>{
    console.log(res)
    tableData.value=res.data.data

  })
}
selectAll()


// 添加
// 添加
const dialogVisible = ref(false)
const ruleForm = ref({
  avatarImg:'',
  carNo:'',
  fuelTypeId:'',
  licensePlateId:'',
  carBrandId:'',
  displacementId:'',
  batteryCapacityId:'',
  voltage:'',
  capacity:'',
  range:'',
  vehicleIdentifyNo:'',
  maxSpeed:'',
  modelParameters: '',
  energyConsumptionDesc: '',
  otherDesc: '',
})

// 获取车牌照省市
const options = ref();
function getOptions(){
  requestCarManager({
    url:"/car/carLicenseList",
    method:"get",

  }).then(res=>{
    if(res.status==200){
      options.value = res.data.data
      console.log(res.data.data)

    }
  })
}
getOptions()
// 获取品牌
const options1=ref()
function getOptions1(){
  requestCarManager({
    url:"/car/brandList",
    method:"get",

  }).then(res=>{

    if(res.status==200){
      options1.value = res.data.data
      console.log(res.data.data)
    }
  })
}
getOptions1()

// 获取燃料类型
const options2=ref()
function getOptions2(){
  requestCarManager({
    url:"/car/fuelTypeList",
    method:"get",
  }).then(res=>{

    if(res.status==200){
      options2.value=res.data.data
    }
  })
}
getOptions2()
// 获取排量
const options3=ref()
function getOptions3(){
  requestCarManager({
    url:"/car/displacementList",
    method:"get",
  }).then(res=>{

    if(res.status==200){
      options3.value=res.data.data
    }
  })
}
getOptions3()
// 获取电池类型
const options4=ref()
function getOptions4(){
  requestCarManager({
    url:"/car/batteryCapacityList",
    method:"get",
  }).then(res=>{

    if(res.status==200){
      options4.value=res.data.data
    }
  })
}
getOptions4()
// 添加车辆信息
function submitForm(){
  requestCarManager({
    url:"/admin/car/addCar",
    method:"post",
    data:ruleForm.value,
  }).then(res=>{
    if(res.status==200){

    }
  })
}
// 删除车辆信息
function deleteCar(id){
  requestCarManager({
    url:"/admin/car/removeCar",
    method:"post",
    params:{
      id:id
    }
  }).then(res=>{
    if(res.status==200){
      selectAll()
    }
  })
}
</script>